<template>
  <view class="opration-drawer-container">
    <TuiDrawer :visible="visible" mode="bottom" @close="close">
      <view class="opration-drawer">
        <view class="header">
          <text class="title">{{ dataItem?.title }}</text>
          <text
            class="ali-icon icon-guanbi1"
            style="font-size: 44rpx; color: #ccccc8; padding: 5rpx"
            @click="close"
          ></text>
        </view>
        <view class="content">
          <view class="opration-box" v-for="(item, index) in oprationData" :key="index">
            <text class="label">{{ item.lable }}</text>
            <view class="oprations">
              <view
                class="opration-item"
                v-for="(opration, index) in item.oprations"
                :key="index"
                @click="opration.fn()"
              >
                <button
                  v-if="opration.btn"
                  :open-type="opration.btn.openType"
                  style="padding: 0; border: 0; line-height: normal"
                >
                  <view class="opration-item">
                    <text class="ali-icon" :class="opration.icon" style="color: #2878ff"></text>
                    <text class="opration-text">{{ opration.text }}</text>
                  </view>
                </button>
                <template v-else>
                  <text class="ali-icon" :class="opration.icon" style="color: #2878ff">
                    {{ !opration.icon ? opration.iconCode : '' }}
                  </text>
                  <text class="opration-text">{{ opration.text }}</text>
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </TuiDrawer>
    <ShowModal
      :title="modalObj.title"
      v-model:model-value="modalObj.visible"
      :cancel-color="modalObj.cancelColor"
      :cancel-text="modalObj.cancelText"
      :confirm-color="modalObj.confirmColor"
      :confirm-text="modalObj.confirmText"
      :confirmAutoClose="modalObj.confirmAutoClose"
      @confirm="modalObj.confirmFn"
      :z-index="999999"
    >
      <template #content>
        <text :style="{ color: modalObj.contentColor }">{{ modalObj.content }}</text>
      </template>
    </ShowModal>
  </view>
</template>
<script setup lang="ts">
  import type { IFormTemplate } from '@/api/serviceForm/types';
  import TuiDrawer from '@/components/TuiDrawer/index.vue';
  import { computed, inject, reactive, ref, type Ref } from 'vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import { ServiceFormStatusEnum } from '@/enums/serviceFormEnum';
  import {
    deleteServiceTicketForm,
    serviceTicketFormCopy,
    serviceTicketFormOpenSet,
  } from '@/api/serviceForm';
  import { Toast } from '@/utils';
  import { navigateTo } from '@/router';

  const emits = defineEmits(['ok']);
  const openDrawer = inject<Ref<boolean>>('openDrawer');

  const visible = ref(false);
  const dataItem = ref<IFormTemplate>();

  const open = (currItem: IFormTemplate) => {
    visible.value = true;
    dataItem.value = currItem;
    openDrawer!.value = true;
  };
  const close = () => {
    visible.value = false;
    openDrawer!.value = false;
  };

  const modalObj = reactive({
    visible: false,
    title: '开放填写',
    content: '此表单暂未开放填写，确认开放填写吗？',
    contentColor: '#999996',
    cancelText: '取消',
    cancelColor: '#999996',
    confirmText: '开发填写',
    confirmColor: '#2878FF',
    confirmAutoClose: true,
    confirmFn: () => {},
  });

  const oprationData = reactive([
    {
      lable: '管理表单',
      oprations: [
        {
          show: true,
          icon: computed(() =>
            dataItem.value?.status === ServiceFormStatusEnum.Up ? 'icon-zanting' : 'icon-fabu',
          ),
          text: computed(() =>
            dataItem.value?.status === ServiceFormStatusEnum.Up ? '暂停填写' : '开放填写',
          ),
          btn: null,
          fn: () => {
            if (dataItem.value?.status === ServiceFormStatusEnum.Up) {
              modalObj.content = '暂停后表单将无法填写，确定吗？';

              modalObj.title = '暂停填写';
              modalObj.confirmText = '暂停填写';
            } else {
              modalObj.content = '此表单暂未开放填写，确认开放填写吗？';
              modalObj.title = '开放填写';
              modalObj.confirmText = '开放填写';
            }
            modalObj.contentColor = '#999996';
            modalObj.confirmColor = '#2878FF';
            modalObj.visible = true;
            modalObj.confirmFn = async () => {
              if (!dataItem.value) return;
              const status =
                dataItem.value.status === ServiceFormStatusEnum.Up
                  ? ServiceFormStatusEnum.Down
                  : ServiceFormStatusEnum.Up;
              await serviceTicketFormOpenSet({
                serviceTicketFormId: dataItem.value.id,
                status,
              });
              dataItem.value.status = status;
              Toast('操作成功');
              emits('ok');
            };
          },
        },
        {
          show: true,
          icon: '',
          iconCode: '\ue687',
          text: '编辑',
          fn: () => {
            navigateTo({
              name: 'createServiceForm',
              options: {
                id: dataItem.value?.id,
              },
            });
            close();
          },
        },
        {
          show: true,
          icon: 'icon-fuzhi',
          text: '复制',
          fn: () => {
            serviceTicketFormCopy(dataItem.value?.id as number).then((id) => {
              if (id) {
                navigateTo({
                  name: 'createServiceForm',
                  options: {
                    id,
                  },
                });
              }
              emits('ok');
              close();
            });
          },
        },
        {
          show: true,
          icon: '',
          iconCode: '\ue686',
          text: '删除',
          fn: () => {
            modalObj.content =
              '当前操作将会删除表单模板，并将会把已收集的表单数据全部删除，请谨慎操作！';
            modalObj.contentColor = '#EA5E0E';
            modalObj.title = '删除表单模板';
            modalObj.confirmText = '删除表单';
            modalObj.confirmColor = '#EA5E0E';
            modalObj.visible = true;
            modalObj.confirmFn = () => {
              uni.showModal({
                title: '',
                content: '即将删除表单以及表单收集的所有数据，确定要删除？',
                cancelText: '取消',
                cancelColor: '#999996',
                confirmColor: '#EA5E0E',
                confirmText: '确认删除',
                success: async (res) => {
                  if (res.confirm) {
                    await deleteServiceTicketForm(dataItem.value!.id);
                    Toast('删除成功');
                    emits('ok');
                    close();
                  }
                },
              });
            };
          },
        },
      ],
    },
    // {
    //   lable: '发送表单',
    //   oprations: computed(() =>
    //     [
    //       {
    //         show: true,
    //         icon: 'icon-fenxiang',
    //         text: '分享',
    //         btn: {
    //           openType: 'share',
    //         },
    //         fn: () => {},
    //       },
    //       {
    //         show: !!dataItem.value?.img,
    //         btn: {},
    //         icon: 'icon-tupian',
    //         text: '分享海报',
    //         fn: () => {
    //           const { downloadFile } = useSaveFile();
    //           downloadFile(dataItem.value!.img).then((res) => {
    //             uni.showShareImageMenu({
    //               path: res,
    //             });
    //           });
    //         },
    //       },
    //     ].filter((item) => item.show),
    //   ),
    // },
    {
      lable: '表单分析',
      oprations: [
        {
          show: true,
          icon: 'icon-tongji',
          text: '统计结果',
          fn: () => {
            navigateTo({
              name: 'formDatas',
              options: {
                id: dataItem.value!.id,
                currentIndex: 0,
              },
            });
            close();
          },
        },
        {
          show: true,
          icon: 'icon-liebiao',
          text: '详细数据',
          fn: () => {
            navigateTo({
              name: 'formDatas',
              options: {
                id: dataItem.value!.id,
                currentIndex: 1,
              },
            });
            close();
          },
        },
      ],
    },
  ]);

  defineExpose({
    open,
  });
</script>
<style lang="scss" scoped>
  .opration-drawer-container {
    .opration-drawer {
      .header {
        height: 96rpx;
        box-shadow: 0px -1px 0px 0px #ebedf0 inset;
        padding: 0rpx 24rpx 0rpx 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          font-size: 32rpx;
          line-height: 44rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .content {
        background-color: #f7f8fa;
        padding-bottom: 400rpx;
        height: 100%;
        .opration-box {
          padding: 16rpx 32rpx;
          .label {
            color: #999996;
            font-size: 28rpx;
            line-height: 40rpx;
          }
          .oprations {
            display: flex;
            gap: 16rpx;
            margin-top: 16rpx;
            .opration-item {
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 16rpx;
              width: 160rpx;
              height: 160rpx;
              background-color: white;
              border-radius: 16rpx;
              button::after {
                border: 0;
              }
              .ali-icon {
                font-size: 56rpx;
              }
              .opration-text {
                font-size: 28rpx;
                line-height: 40rpx;
              }
            }
          }
        }
      }
    }
  }
</style>
